<template>
  <div class="content_left_sqryfb">
    <titleBox text="邻里互助"></titleBox>
    <div class="content">
      <div id="llhdEChart" class="charts"></div>
      <mTable :titleData="titleData" :valueData="valueData" @clickBtn="rowClick"></mTable>
    </div>
    <llhzxqModal ref="llhzxqModalRef" @qrxf="qrxf"></llhzxqModal>
    <wlbmModal ref="wlbmModalRef" @close="wlbmModalClose"></wlbmModal>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue"
import * as echarts from "echarts"
import titleBox from "../mConponents/titleBox.vue"
import mTable from "../mConponents/mTable.vue"
import wlbmModal from "../mConponents/modal/wlbmModal.vue"
import llhzxqModal from "../mConponents/modal/llhzxqModal.vue"
const llhzxqModalRef = ref(null)
const rowClick = () => {
  llhzxqModalRef.value.show()
}
const wlbmModalRef = ref(null)
const qrxf = () => {
  llhzxqModalRef.value.close()
  wlbmModalRef.value.show()
}
const wlbmModalClose = () => {
  // wlbmModalRef.value.close()
  llhzxqModalRef.value.show()
}

const titleData = [
    {
      name: "序号",
      key: "index",
      style: {
        width: "20px"
      }
    },
    {
      name: "发起人",
      key: "name",
      style: {
        width: "50px"
      }
    },
    {
      name: "类型",
      key: "type",
      style: {
        width: "50px"
      }
    },
    {
      name: "创建时间",
      key: "date",
      style: {
        width: "100px"
      }
    },
    {
      name: "操作",
      type: "btn",
      btns: ["查看详情"],
      style: {
        flex: 1
      }
    }
 ]
  const valueData = [
    {
      index: "1",
      name: "周泽宇",
      type: "类型名称",
      date: "2025-02-15 17:28"
    },
    {
      index: "2",
      name: "周泽宇",
      type: "类型名称",
      date: "2025-02-15 17:28"
    },
    {
      index: "3",
      name: "周泽宇",
      type: "类型名称",
      date: "2025-02-15 17:28"
    }
  ]


const echartsRef = ref(null)

onMounted(() => {
  const dom = document.getElementById("llhdEChart")
  const myChart = echarts.init(dom) // 初始化echarts实例
  const datas = [
          { value: 10, name: "类型名称1" },
          { value: 10, name: "类型名称2" },
          { value: 20, name: "类型名称3" },
          { value: 30, name: "类型名称4" },
          { value: 80, name: "类型名称5" },
          { value: 20, name: "类型名称6" },
          { value: 20, name: "类型名称7" },
          { value: 20, name: "类型名称8" },
          { value: 20, name: "类型名称9" },
          { value: 20, name: "类型名称10" },
          { value: 20, name: "类型名称11" },
          { value: 20, name: "类型名称12" }
        ]
  const option = {
    grid: {
        left: "0%", // 可以调整这个值来改变饼图的位置，使其靠左显示
        containLabel: true
    },
    legend: {
      left: "right",
      x: "left",
      y: "center",
      itemGap: 8,
      orient: "vertical",
      itemHeight: 10,
      itemWidth: 10,
      textStyle: {
        rich: {
          name: {
            verticalAlign: "right",
            align: "left",
            width: 40,
            fontSize: 8,
            color: "#FFFFFF"
          },
          value: {
            align: "left",
            width: 25,
            fontSize: 8,
            color: "#FFFFFF"
          }
        },
        color: "#54bef9"
      },
      data: datas.map((item) => item.name),
      formatter: function (name) {
        let tarValue
        for (let i = 0; i < datas.length; i++) {
          if (name === datas[i].name) {
            tarValue = datas[i].value
          }
        }
        return (
          "{name| " + name + "}  " + "{value| " + tarValue + "个}"
        )
      }
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"], // 定义外层和内层的半径
        avoidLabelOverlap: false,
        center: ["20%", "50%"],
        borderWidth: 10,
        borderColor: "#fff",
        data: datas,
        label: {
          show: false // 隐藏默认的标签
        }
      },
      {
            z: 100,
            type: "gauge", // 这个type类型要设置为gauge
            radius: "-50%",
            center: ["20%", "50%"],
            // 配置中间的数字的样式
            detail: {
              // 调节数字位置
              offsetCenter: [-1, 12],
              color: "#fff",
              fontSize: "14px"
            },
            pointer: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            // 中间的字和数字 数据
            data: [
              {
                value: 6,
                name: "累积",
                title: {
                  show: true,
                  color: "#fff",
                  fontSize: 10,
                  offsetCenter: [0, "20%"]// 配置“总风险数”的位置
                }
              }

            ]
          }
    ]
  }
  // 设置实例参数
  myChart.setOption(option)
})
</script>
<style scoped lang="less">
.content_left_sqryfb {
  margin-top: 10px;
  .content {
    padding: 10px;
    background-color: rgba(0, 26, 29, 0.8);
    width: 330px;
    // height: 150px;
    // border: 1px solid #11AFC180;
    // border-radius:5px;
    margin-top: 5px;
    // align-items: center;
    // display: flex;
    .charts {
      width: 310px;
      height: 130px;
    }
    .nan {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .nv {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
